<template>
<div>
    <x-header :left-options="{backText: ''}">{{this.$route.params.like}}</x-header>
    <div class="gzbox" v-for="(i,index) in list" :key="index">
        <router-link class="gline" :to="'/Nd/' + i.User_id">
        <div class="gzmsg">
        <img class="gztx" :src="i.User_tx" alt="" width="60" height="60">
        <span class="gzname">{{i.User_name}}</span>
        <img :src="i.User_sex" alt="" width="20">   
        </div>
        </router-link>
        <button class="gzbt" @click="$router.push('/chatbody/' + i.User_id)">私聊</button>
    </div>
</div> 
</template>

<script>
export default {
  data () {
    return {
        list:[],
  }
 },
    mounted(){
        this.$vux.loading.show();
        this.getlist()
    },
    methods: {
        getlist(){
            var a = this.$route.params.list.split(','); 
            this.$http.post("http://localhost:3000/users/alllist",
            {
                list:a
            },{emulateJSON: true})
            .then(
            (response)=>{      
                this.list=response.data;
                for (let i = 0; i < this.list.length; i++) {//性别图片
                if(this.list[i].User_sex == '无'){
                    this.list[i].User_sex = 'static/img/sex.png'
                }
                else if(this.list[i].User_sex == '男') {
                    this.list[i].User_sex = 'static/img/male.png'
                }
                else if(this.list[i].User_sex == '女') {
                    this.list[i].User_sex = 'static/img/female.png'
                }
                }
                this.$vux.loading.hide();
            },
            (error)=>{
                console.log("err");
            });//
        }
  },
}
</script>
<style lang="less" scoped>
.gline{
text-decoration:none;
color: #000;
}
.gzbox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:10px;
}
.gzmsg{
    display: flex;
    align-items: center;
}
.gztx{
    background-color: antiquewhite;
    border-radius: 100%;
    margin-right: 10px;
}
.gzname{
    margin-right: 10px;
    max-width: 130px;
    font-size: 16px;
    font-weight:500;
    white-space:nowrap; 
    text-overflow:ellipsis;
    overflow:hidden;
}
.gzbt{
    height: 30px;
    width: 80px;
    margin-right: 20px;
    white-space:nowrap; 
    background-color: white; 
    color: #008CBA; 
    border: 2px solid #008CBA;
    border-radius: 15px;
    font-size: 12px;
    padding: 5px 15px;
}
</style>